<template>
  <el-table
    :data="data"
    show-overflow-tooltip
    stripe
    max-height="500px"
  >
    <el-table-column
      v-for="column in columns "
      :key="column.id"
      v-bind="column"
    >
      <template
        v-if="column.s_default"
        #default="scope"
      >
        <component :is="column.s_default(scope.row,scope)" />
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="pageInfo.currentPage"
    v-model:page-size="pageInfo.pageSize"
    class="table-pager"
    background
    layout="total,sizes, prev, pager, next"
    :total="total"
    :page-sizes="[10, 15, 50, 100]"
    @size-change="changeHandle"
    @current-change="changeHandle"
  />
</template>

<script setup>
const emit = defineEmits(['pagerChange'])
const props = defineProps({
    data:{
        type:Array,
        default:()=>[]
    },
    columns :{
        type:Array,
        default:()=>[]
    },
    total:{
        type:Number,
        default:0
    }
})

const pageInfo = {
    pageSize:10,
    currentPage:1
}

const changeHandle =()=>{
    emit('pagerChange')
}



defineExpose({
    pageInfo
})


</script>

<style lang="scss" scoped>

.table-pager{
  padding: 24px 0;
  float: right;
   
}
</style>